<template>
  <el-dialog
    title="移动端配置"
    :visible.sync="dialog.isShow"
    width="1000px"
    top="70px"
    :close-on-click-modal="false"
    class="mobile-setting"
    @close="closeEvent"
  >
    <el-tabs tab-position="left">
      <el-tab-pane label="企业微信">
        <el-tabs type="border-card">
          <el-tab-pane label="推送消息">
            <el-button
              size="mini"
              type="primary"
              class="mb0"
              @click="Save"
            >
              <svg-icon class="svg-icon-btn" icon-class="preservation" />
              保存
            </el-button>
            <el-row>
              <el-col :span="10">
                <el-card class="box-card row-height">
                  <div slot="header" class="ms-header">
                    <span>消息规则</span>
                  </div>
                  <div>
                    <el-input
                      ref="textarea"
                      v-model="content"
                      type="textarea"
                      rows="12"
                    />
                  </div>
                </el-card>
              </el-col>
              <el-col :span="14">
                <el-card class="box-card row-height">
                  <div slot="header" class="ms-header">
                    <span>可选择内容</span>
                  </div>
                  <div>
                    <el-button
                      v-for="(item,index) in fieldList"
                      :key="index"
                      type="primary"
                      size="mini"
                      @click="insertAtCursor(item)"
                    >
                      {{ item.strcolumnname }}
                    </el-button>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane :disabled="true" label="单据显示" />
        </el-tabs>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>
<script>
import { getFields, updateMoveMessageFn } from '@/api/system/bill-setting/bill-template'
export default {
  name: 'MobileSetting',
  data() {
    return {
      dialog: {
        isShow: false
      },
      content: '', // textarea内容
      fieldList: [],
      lngtemplateid: ''
    }
  },
  methods: {
    show() {
      this.dialog.isShow = true
    },
    Save() {
      updateMoveMessageFn({
        lngbilltemplateid: this.lngtemplateid,
        strmessage: this.content
      }).then(res => {
        if (res.code === 20000) {
          this.$message.success(res.message)
        }
      })
    },
    getFields(lngreceipttypeid) {
      getFields({ lngreceipttypeid: lngreceipttypeid }).then(res => {
        this.fieldList = res.data
      })
    },
    async insertAtCursor(item) {
      var myValue = ' {' + item.strcolumnname + '} '
      const myField = this.$refs.textarea.$el.children[0]
      if (myField.selectionStart || myField.selectionStart === 0) {
        var startPos = myField.selectionStart
        var endPos = myField.selectionEnd
        this.content = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length)
        await this.$nextTick() // 这句是重点, 圈起来
        myField.focus()
        // myField.setSelectionRange(endPos + myValue.length, endPos + myValue.length)
      } else {
        this.content += myValue
      }
    },
    closeEvent() {
      this.$emit('refresh')
    }
  }
}
</script>

<style lang="scss">
@import '../../../../../styles/variables';
.mobile-setting .el-dialog__body{
    padding-top: 0;
}
.ms-header{
  background: $themeColor;
  line-height: 2.3;
  color:#fff;
  text-indent: 1em;
}
.row-height .el-card__header{
  padding:0;
}
</style>
<style scoped>
.row-height{
    height: calc(100vh - 400px);
}
.mb0{
  margin-bottom: 0;
}
</style>
